<template>
  <div class="tree-container">
    <el-card shadow="hover" header="element plus Tree 树形控件改成表格">
      <div v-loading="treeLoading">
        <div class="tree-head">
          <div class="tree-head-check">
            <el-checkbox v-model="treeCheckAll" @change="onCheckAllChange"></el-checkbox>
          </div>
          <div class="tree-head-one">资源名称</div>
          <div class="tree-head-two">资源类型</div>
          <div class="tree-head-three">通用菜单</div>
          <div class="tree-head-three">路径</div>
          <div class="tree-head-three">组件</div>
          <div class="tree-head-three">通用菜单</div>
        </div>
        <el-tree :data="treeTableData"
                 show-checkbox
                 node-key="resourceId"
                 ref="treeTable"
                 :props="treeDefaultProps"
                 @check="onCheckTree"
                 default-expand-all
                 :default-checked-keys="defaultSelectKey"
        >
          <template #default="{ data }">
						<span class="tree-custom-node">
							<span style="flex: 1">{{ data.resourceName }}</span>
								<span type="text" size="default" style="flex: 1">{{
                    data.recourseType == 1 ? '目录' : data.recourseType == 2 ? '菜单' : '按钮'
                  }}</span>
								<span type="text" size="default" style="flex: 1">{{ data.isGeneral ? '是' : '否' }}</span>
                <span type="text" size="default" style="flex: 1">{{ data.path }}</span>
                <span type="text" size="default" style="flex: 1">{{ data.component }}</span>
								<span type="text" size="default" style="flex: 1">{{ data.mandatory }}</span>
						</span>
          </template>
        </el-tree>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import {defineComponent, getCurrentInstance, onBeforeMount, reactive, toRefs} from 'vue';
import {ElMessage} from 'element-plus';
import {buildTenantResources} from "/@/api/tenant/install";

// 定义接口来定义对象的类型
interface TreeDataState {
  id: number;
  label: string;
  label1: string;
  label2: string;
  isShow: boolean;
  children?: TreeDataState[];
}

interface TreeSate {
  treeCheckAll: boolean;
  treeLoading: boolean;
  treeTableData: TreeDataState[];
  treeDefaultProps: {
    children: string;
    label: string;
    disabled: string
  };
  treeSelArr: TreeDataState[];
  treeLength: number;
  defaultSelectKey: string []
}

export default defineComponent({
  name: 'pagesTree',
  setup: function () {
    const {proxy} = <any>getCurrentInstance();
    const state = reactive<TreeSate>({
      treeCheckAll: false,
      treeLoading: false,
      treeTableData: [],
      treeDefaultProps: {
        children: 'children',
        label: 'label',
        disabled: 'forceSelect'
      },
      treeSelArr: [],
      treeLength: 0,
      defaultSelectKey: []
    });
    // 初始化树的长度
    const initTreeLengh = (arr: TreeDataState[]) => {
      let count = 0;
      arr.map((item) => {
        if (item.children) {
          count += item.children.length;
        }
      });
      state.treeLength = count + arr.length;
    };
    // 全选改变时
    const onCheckAllChange = () => {
      if (state.treeCheckAll) {
        proxy.$refs.treeTable.setCheckedNodes(state.treeTableData);
      } else {
        proxy.$refs.treeTable.setCheckedKeys([]);
      }
    };
    // 节点选中状态发生变化时的回调
    const onCheckTree = () => {
      state.treeSelArr = [];
      state.treeSelArr = proxy.$refs.treeTable.getCheckedNodes();
      state.treeSelArr.length == state.treeLength ? (state.treeCheckAll = true) : (state.treeCheckAll = false);
    };
    // 选择元素按钮
    const onSelect = () => {
      let treeArr = proxy.$refs.treeTable.getCheckedNodes(false,true);
      if (treeArr.length <= 0) {
        ElMessage.warning('请选择元素');
        return;
      } else {
        console.log(proxy.$refs.treeTable.getCheckedNodes(false,true));
      }
    };
    // 初始化树模拟数据
    const getTreeData = async () => {
      let tenantResources = await buildTenantResources(1);
      let resources = tenantResources.data[0].child;
      state.treeTableData = resources;
      defaultSelectKey(state.defaultSelectKey, resources)
      initTreeLengh(state.treeTableData);
    };

    const defaultSelectKey = (arr: string[], data: any) => {
      data.forEach((item: any) => {
        if (item.forceSelect) {
          arr.push(item.resourceId)
        }
        if (item.children != null) {
          defaultSelectKey(arr, item.children)
        }
      })
    }
    // 页面加载前
    onBeforeMount(() => {
      getTreeData();
    });
    return {
      getTreeData,
      onCheckAllChange,
      onCheckTree,
      onSelect,
      ...toRefs(state),
    };
  },
});
</script>

<style scoped lang="scss">
.tree-container {
  .tree-head {
    height: 48px;
    line-height: 48px;
    border: 1px solid var(--next-border-color-light);
    border-bottom: none;
    display: flex;
    padding-right: 8px;
    font-weight: bold;
    color: #909399;

    .tree-head-check {
      width: 38px;
      text-align: right;
    }

    .tree-head-one,
    .tree-head-two,
    .tree-head-three {
      flex: 1;
    }

    .tree-head-one {
      padding-left: 8px;
    }
  }

  .el-tree {
    overflow: hidden;
    border-bottom: 1px solid var(--next-border-color-light);

    .tree-custom-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 8px;
      width: 100%;
    }

    &::v-deep(.el-tree-node) {
      border: 1px solid var(--next-border-color-light);
      border-bottom: none;
      color: #606266;

      .el-tree-node__content {
        line-height: 57px !important;
        height: 57px !important;
      }

      .el-tree-node__children {
        .el-tree-node {
          border: none;
        }

        .el-tree-node__content {
          border-top: 1px solid var(--next-border-color-light);
        }
      }
    }
  }
}
</style>